<template>
    <div class="webCollectContent">
        <div class="webCollectBox">
            <div class="searchBoxMain">
                <van-search
                    class="transparent-round-search"
                    v-model="searchQuery"
                    @keyup="goSearch"
                    shape="round"
                    ref="searchRef"
                    maxlength="30"
                    placeholder="请输入关键词搜索"
                    @blur="goSearch"
                    @clear="clearSearchQuery"
                />
            </div>
            <div class="webCollectBoxItem" v-if="webCollectList && webCollectList.length">
                <van-collapse v-model="activeName" accordion :border="false" @change="changeCollapse">
                    <van-collapse-item  v-for="(item, index) in webCollectList" :key="item.id" :name="item.id">
                        <template #title>
                            <div>
                                <span style="color: #f60;">{{ index+1 }}、</span>
                                <span>{{ item.title }}</span>
                                <span style="font-size: 12px;margin-left: 30px;color: #97fc82;">{{ item.tag }}</span>
                            </div>
                        </template>
                        <div  @click="goUrl(item.path)">
                            <p>地址：<span style="color: #f60;">{{ item.path }}</span></p>
                            <p style="margin: 10px 0;">简介：{{ item.info }}</p>
                        </div>
                    </van-collapse-item>
                </van-collapse>
            </div>
            <div class="emptyBox" v-else>
                <van-empty :description="`暂无${searchQuery}相关地址`" />
            </div>
            <div class="topBtn" v-if="scrollPosition >= 220" @click="goBegin">
                <van-icon name="arrow-up" size="25" color="#ffffff" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast, showFailToast } from 'vant'
import collectStore from '@/store/modules/collectDataList'
import useSettingStore from '@/store/modules/setting'
const settings = useSettingStore()
const collectDataStore = collectStore()


const route = useRoute()
const router = useRouter()

const activeName = ref('')
const searchQuery = ref<string>('')
const searchRef = ref<any>(null)
const webCollectSourceList = ref<any>([])
const webCollectList = ref<any>([])

const clearSearchQuery = () => {
    searchQuery.value = ''
    webCollectList.value = webCollectSourceList.value
}

const goSearch = () => {
    settings.handlerLoadingShow(true)
    if (searchQuery.value == '' || !searchQuery.value) {
        webCollectList.value = webCollectSourceList.value
        settings.handlerLoadingShow(false)
    } else {
        webCollectList.value = webCollectSourceList.value.filter((item: any) => item.title.includes(searchQuery.value) || item.tag.includes(searchQuery.value) || item.info.includes(searchQuery.value))
        settings.handlerLoadingShow(false)
    }
}

const urlNum = ref<number>(1)
const goUrl = (url: string) => {
    if (!url) return showFailToast('链接无效')
    if (urlNum.value > 0) {
        urlNum.value--
        copy(url)
    } else {
        urlNum.value = 1
        window.open(url)
    }
}

const copy = (mes: string) => {
    var input = document.createElement('input') 
    input.value = mes 
    document.body.appendChild(input) 
    input.select() 
    document.execCommand('copy') 
    document.body.removeChild(input)
    showToast('已将地址复制到剪贴板，再次点击跳转链接')
}

const changeCollapse = (id: string) => {
    console.log('id', id)
    urlNum.value = 1
}


const scrollPosition = ref<number>(0);

// 滚动事件处理函数
const handleScroll = () => {
    scrollPosition.value = window.scrollY; // 获取垂直滚动位置或者使用 document.documentElement.scrollTop
    // if (window.scrollY == 0) { // 顶部滚动时隐藏头部，否则显示头部
    //     settings.handlerHeaderShow(true)
    // } else {
    //     settings.handlerHeaderShow(false)
    // }
}

const goBegin = () => {
    window.scrollTo({
        top: 0,
        behavior: 'smooth' // 平滑滚动效果
    });
}

watch([() => searchRef.value, () => searchQuery.value], (newVal) => {
    console.log('newVal', newVal)
    // if (searchRef.value) {
    //     searchRef.value?.focus()
    // } else {
    //     goSearch()
    // }
    if (newVal[1]) {
        goSearch()
    }
})

// 监听滚动位置变化
watch(scrollPosition, (newVal) => {
    // console.log('新的滚动位置:', newVal);
    return
});

onMounted(() => {
    window.addEventListener('scroll', handleScroll);
    if (collectDataStore.collectDataList && collectDataStore.collectDataList.length) {
        webCollectSourceList.value = collectDataStore.collectDataList.filter((item: any) => item.title.includes('网页收藏' as string))[0]?.list
    }
    webCollectList.value = webCollectSourceList.value
})

onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll);
});

</script>


<style lang="scss" scoped>
.webCollectContent {
    width: 100%;
    height: auto;
    // padding: 15px;
    position: relative;
    .webCollectBox{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .searchBoxMain {
            width: 100%;
        }
        .webCollectBoxItem {
            margin: 10px 0;
            width: 100%;
            height: auto;
        }
        .topBtn {
            position: fixed;
            bottom: 35px;
            right: 35px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #666;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}
</style>